<!--
  功能：离校审核
  作者：licy
  邮箱：licy@briup.com
  时间：2020年12月04日 13:34:40
  版本：v1.0
  修改记录：
  修改内容：
  修改人员：
  修改时间：
-->
<template>
  <div class='go_job'>
    <!-- 信息 -->
    <div class="page_info">
      <div class="title">说明：</div>
      <p>1. 本申请书适用于：杰普培训学员因就业、升学等原因提出的离校申请</p>
      <p>2. 请确保填写信息真实、完整</p>
      <p>3. 申请提交成功，就业部会在3个工作日后回复处理结果（核实信息、与家长及学校确认），请耐心等待，如遇紧急情况，请直接联系本班就业老师</p>
    </div>
    <!-- 表单 -->
    <div class="job_form">
      <el-form size="small" :model="form" ref="apply_form" :rules="rules">
        <div class="job_form_title">您离开基地后的住宿方式</div>
        <el-form-item prop="accommodationType" >
          <el-select v-model="form.accommodationType" style="width:100%">
            <el-option label="住家里" value="住家里"></el-option>
            <el-option label="企业宿舍" value="企业宿舍"></el-option>
            <el-option label="租房-单人独自租房" value="租房-单人独自租房"></el-option>
            <el-option label="租房-合租" value="租房-合租"></el-option>
            <el-option label="其他" value="其他"></el-option>
          </el-select>
        </el-form-item>

        <div class="job_form_title">您离开基地的常住地址</div>
        <el-form-item prop="address">
          <el-input v-model="form.address"></el-input>
        </el-form-item>

        <div class="job_form_title">请选择离开基地原因</div>
        <el-form-item prop="leaveReason">
          <el-select v-model="form.leaveReason" style="width:100%">
            <el-option label="已落实好工作" value="已落实好工作"></el-option>
            <el-option label="出国留学/准备出国考试" value="出国留学/准备出国考试"></el-option>
            <el-option label="准备公务员或事业单位考试" value="准备公务员或事业单位考试"></el-option>
            <el-option label="考研/保研" value="考研/保研"></el-option>
            <el-option label="当兵入伍" value="当兵入伍"></el-option>
            <el-option label="自主创业" value="自主创业"></el-option>
            <el-option label="放弃基地就业推荐、自主求职" value="放弃基地就业推荐、自主求职"></el-option>
            <el-option label="准备专升本考试" value="准备专升本考试"></el-option>
            <el-option label="其他（非上述所列情况，申请离校）" value="其他（非上述所列情况，申请离校）"></el-option>
          </el-select>
        </el-form-item>
        <!-- 单位信息 -->
        <div v-if="form.leaveReason == '已落实好工作'">
          <p class="sub_title">请填写实习单位信息（以下信息，用于高校就业登记及回访使用）</p>
          <el-form-item label="单位名称" prop="companyName" label-width="130px">
            <el-input v-model="form.companyName"></el-input>
          </el-form-item>
          <el-form-item label="单位地址" prop="companyAddress" label-width="130px">
            <el-input v-model="form.companyAddress"></el-input>
          </el-form-item>
          <el-form-item label="单位联系人" prop="companyLinkName" label-width="130px">
            <el-input v-model="form.companyLinkName"></el-input>
          </el-form-item>
          <el-form-item label="单位联系人电话" prop="companyLinkTelephone" label-width="130px">
            <el-input v-model="form.companyLinkTelephone"></el-input>
          </el-form-item>
          <el-form-item label="入职岗位名称" prop="post" label-width="130px">
            <el-input v-model="form.post"></el-input>
          </el-form-item>
          <el-form-item label="实习薪资福利" prop="salaryInternshipMonth" label-width="130px">
            <el-input v-model="form.salaryInternshipMonth"></el-input>
          </el-form-item>
          <el-form-item label="转正薪资福利" prop="salaryMonth" label-width="130px">
            <el-input v-model="form.salaryMonth"></el-input>
          </el-form-item>
        </div>
        <!-- 研究生信息 -->
        <div v-if="form.leaveReason == '考研/保研'">
          <p class="sub_title">请填写考研信息</p>
          <el-form-item label="升学读研" prop="isGraduate" label-width="140px">
            <el-select v-model="form.isGraduate">
              <el-option label="已考上" value="已考上"></el-option>
              <el-option label="复试" value="复试"></el-option>
              <el-option label="保研" value="保研"></el-option>
              <el-option label="二战" value="二战"></el-option>
              <el-option label="调剂" value="调剂"></el-option>
              <el-option label="首次备考" value="首次备考"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="报考学校" prop="choiceUniversity" label-width="140px">
            <el-input v-model="form.choiceUniversity"></el-input>
          </el-form-item>
          <el-form-item label="报考专业" prop="choiceMajor" label-width="140px">
            <el-input v-model="form.choiceMajor"></el-input>
          </el-form-item>
        </div>
        <!-- /研究生信息 -->
        <!-- 其他 -->
        <div v-if="form.leaveReason == '放弃基地就业推荐、自主求职' || form.leaveReason == '其他（非上述所列情况，申请离校）'">
          <p class="sub_title">其他信息</p>
          <el-form-item label="离校理由及求职打算（例：回校参加补考、计划2021年春节后、再回昆山基地求职）" prop="leavePlan" >
            <div class="clear">
              <el-input type="textarea" :rows="3" v-model="form.leavePlan"></el-input>
            </div>
          </el-form-item>
          <el-checkbox v-model="form.isAgree">
            本人因上述原因，申请提前结束课程培训，并不再享受杰普的就业承诺，杰普就业部会定期访问，并继续提供就业方面的帮助
          </el-checkbox>
        </div>
        <!-- /其他 -->
        <!-- 专升本 -->
        <div v-if="form.leaveReason == '准备专升本考试'">
          <el-form-item label="专升本学校" prop="choiceUniversity" label-width="140px">
            <el-input v-model="form.choiceUniversity"></el-input>
          </el-form-item>
          <el-form-item label="专升本专业" prop="choiceMajor" label-width="140px">
            <el-input v-model="form.choiceMajor"></el-input>
          </el-form-item>
          <el-form-item label="考试时间" prop="entranceExamTime" label-width="140px">
            <el-date-picker v-model="form.entranceExamTime" value-format="timestamp" type="date" placeholder="选择日期" />
          </el-form-item>
        </div>
        <!-- /专升本 -->

        <!-- 附件 -->
        <div style="text-align:center">
          <p class="sub_title">
            考试/升学证明/企业录用OFFER或企业开具的工作证明扫描件
          </p>
          <el-upload
            class="upload-demo"
            drag
            action="http://47.106.244.1:7788/file/upload"
            :file-list="fileList"
            :on-success="uploadSuccessHandler">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>

          <p style="color:red;font-size:12px">
            工作证明原件需要快递杰普就业部：上海静安区共和新路2802号1号楼505C杰普软件就业部 xxx老师 (收) 021-56778147
          </p>
        </div>

        <div style="text-align:right">
          <el-button type="primary" size="small" @click="submitHandler">提交</el-button>
        </div>

      </el-form>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {post,get} from '@/utils/request'
export default {
  // 组件名称
  name: 'demo',
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data () {
   return {
     form:{},
     fileList:[],
     rules: {
      leaveReason: [ { required: true, message: '请选择离开基地原因', trigger: 'change' } ],
      accommodationType: [ { required: true, message: '请选择住宿方式', trigger: 'change' } ],
      address: [ { required: true, message: '请输入离开后常住地', trigger: 'blur' } ],

      companyName: [ { required: true, message: '请输入企业名称', trigger: 'blur' } ],
      companyAddress: [ { required: true, message: '请输入企业地址', trigger: 'blur' } ],
      companyLinkName: [ { required: true, message: '请输入企业联系人名字', trigger: 'blur' } ],
      companyLinkTelephone: [ { required: true, message: '请输入企业联系人电话', trigger: 'blur' } ],
      post: [ { required: true, message: '请输入岗位', trigger: 'blur' } ],
      salaryInternshipMonth: [ { required: true, message: '请输入实习薪资待遇', trigger: 'blur' } ],
      salaryMonth: [ { required: true, message: '请输入薪资待遇', trigger: 'blur' } ],

      isGraduate:[ { required: true, message: '请选择是否考上研究生', trigger: 'change' } ],
      choiceUniversity: [ { required: true, message: '报考学校', trigger: 'blur' } ],
      choiceMajor: [ { required: true, message: '报考专业', trigger: 'blur' } ],
      entranceExamTime: [ { required: true, message:'考试时间', trigger: 'blur' } ],

      leavePlan:[ { required: true, message: '报输入离开杰普后打算', trigger: 'blur' } ],
    },
   }
  },
  // 计算属性
  computed: {
    ...mapGetters(['user'])
  },
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 上传成功的处理函数
    uploadSuccessHandler(resp){
      if(resp.status == 200){
        // 将fileID填充到form中，待会保存的时候提交给后台
        let fileId = resp.data.id;
        this.form = {
          ...this.form,
          fileId    // 附件
        }
      } else {
        this.$message({type:"error",message:resp.message})
      }
    },
    // 提交
    submitHandler() {
      this.$refs['apply_form'].validate((valid) => {
        if (valid) {
          const url = '/graduateApply/submit'
          this.form.studentId = this.user.student.id;
          post(url, this.form)
            .then(response => {
              this.visible = false
              this.$message({ message: response.message, type: 'success' })
              this.goBack();
            })
        } else {
          return false
        }
      })
    }
  },
  // 以下是生命周期钩子
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created () {
  },
  /**
  * el 被新创建的 vm.$ el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$ el 也在文档内。
  */
  mounted () {
  },
  /**
  * 实例销毁之前调用。在这一步，实例仍然完全可用。
  */
  beforeDestroy () {
  },
  /**
  * Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，
  * 所有的事件监听器会被移除，所有的子实例也会被销毁。
  */
  destroyed () {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style scoped>
.job_form_title {
  line-height: 2.6em;
  font-weight: bold;
}
.job_form {
  padding: 0 2em;
  width: 90%;
  margin: 0 auto;
}
</style>
